<template>
  <div class="container" v-loading="status_loading">
    <el-form align="left" ref="formInfo" :model="formInfo">
      <h2 class="title">{{$t('m.out.orderinfo')}}</h2>
      <div class="section">
        <el-row :gutter="30">
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item :label="$t('m.in.ordernumber')+':'" :label-width="formLabelWidth" prop="ordercode">
              <el-input disabled v-model="formInfo.ordercode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.out.ordertype')+':'" :label-width="formLabelWidth" prop="ordertype">
              <el-input v-if="formInfo.ordertype==1" disabled :value="$t('m.out.ordertype1')" autocomplete="off"></el-input>
              <el-input v-else disabled :value="$t('m.out.ordertype1')" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.out.totalamount')+':'" :label-width="formLabelWidth" prop="totalamount">
              <el-input disabled v-model="formInfo.totalamount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.in.consignor')+':'" :label-width="formLabelWidth" prop="consignorname">
              <el-input disabled v-model="formInfo.consignorname" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item :label="$t('m.out.storeordercode')+':'" :label-width="formLabelWidth" prop="storeordercode">
              <el-input disabled v-model="formInfo.storeordercode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.out.shopname')+':'" :label-width="formLabelWidth" prop="shopname">
              <el-input disabled v-model="formInfo.shopname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.out.freight')+':'" :label-width="formLabelWidth" prop="freight">
              <el-input disabled v-model="formInfo.freight" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item :label="$t('m.state')+':'" :label-width="formLabelWidth" prop="statetext">
              <el-input disabled v-model="formInfo.statetext" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.out.totalnumber')+':'" :label-width="formLabelWidth" prop="totalnumber">
              <el-input disabled v-model="formInfo.totalnumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.otherstore.currency')+':'" :label-width="formLabelWidth" prop="currency">
              <el-input disabled v-model="formInfo.currency" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <h2 class="title">{{$t('m.out.consigneeinfo')}}</h2>
      <div class="section">
        <el-row :gutter="30">
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item :label="$t('m.out.consignee')+':'" :label-width="formLabelWidth" prop="consignee">
              <el-input disabled v-model="formInfo.consignee" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.out.provincename')+':'" :label-width="formLabelWidth" prop="provincename">
              <el-input disabled v-model="formInfo.provincename" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item :label="$t('m.out.contact')+':'" :label-width="formLabelWidth" prop="contact">
              <el-input disabled v-model="formInfo.contact" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.out.cityname')+':'" :label-width="formLabelWidth" prop="cityname">
              <el-input disabled v-model="formInfo.cityname" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item :label="$t('m.out.countryname')+':'" :label-width="formLabelWidth" prop="countryname">
              <el-input disabled v-model="formInfo.countryname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.out.regionname')+':'" :label-width="formLabelWidth" prop="regionname">
              <el-input disabled v-model="formInfo.regionname" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('m.out.address')+':'" :label-width="formLabelWidth" prop="shippingaddress">
              <el-input disabled v-model="formInfo.shippingaddress" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <h2 class="title">{{$t('m.out.orderdetail')}}</h2>
      <div class="section">
        <el-table :span-method="objectSpanMethod" ref="table" :data="tableData" stripe empty-text fits style="width: 100%" tooltip-effect="dark">
          <el-table-column align="center" prop="__index" label width="50"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
          <el-table-column label="SupplierCode" align="center" prop="suppliercode"></el-table-column>
          <el-table-column align="center" prop="productspec" label="Specification" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="productname" label="ProductName" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="originalquantity" label="Original quantity"></el-table-column>
          <el-table-column align="center" prop="quantity" label="Quantity"></el-table-column>
          <!-- <el-table-column align="center" prop="saleprice" label="Saleprice"></el-table-column> -->
          <el-table-column align="center" prop="stockoutquantity" label="Shortage"></el-table-column>
          <el-table-column align="center" prop="locationcode" label="Location"></el-table-column>
          <el-table-column align="center" prop="state" label="PickStatus">
            <template slot-scope="scope">{{scope.row.state|stateFilter(lan)}}</template>
          </el-table-column>
          <!-- 暂时屏蔽【操作】列 -->
          <!-- <el-table-column align="center" :label="$t('m.operation')">
            <template slot-scope="scope">
              <el-button @click="showDialog(scope.row)" v-if="scope.row.stockoutquantity&&scope.row.state!==10" type="button">{{$t('m.out.editlocation')}}</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <div class="btns">
          <el-button @click="$router.back(-1)" type="button">{{$t('m.close')}}</el-button>
        </div>
      </div>
    </el-form>
    <el-dialog :close-on-click-modal="false" @close="close" width="600px" :title="$t('m.out.editlocation')" :visible.sync="dialogFormVisible1">
      <el-form align="left" :rules="formRule" ref="refform" size :model="form">
        <!-- <el-row>
          <el-col :span="16">
            <el-form-item :label="$t('m.page.location')+$t('m.code')" :label-width="formLabelWidth" size="large">
              <span>{{saveRow.locationcode}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('m.check.count')+':'" :label-width="formLabelWidth">
              <span>{{saveRow.quantity-saveRow.stockoutquantity}}</span>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row v-for="(item,i) in dataList" :key="i">
          <el-col :span="16">
            <el-form-item :label="$t('m.page.location')+$t('m.code')" :label-width="formLabelWidth" size="large">
              <span>{{item.locationcode}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('m.check.count')+':'" :label-width="formLabelWidth">
              <span>{{item.quantity}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btns">
        <!-- <el-button size="mini" @click="confirm">{{$t('m.confirm')}}</el-button> -->
        <el-button size="mini" @click="dialogFormVisible1=false">{{$t('m.close')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'',
  data(){
    return {
      dialogFormVisible1:false,
      form:{
        locationcode:'',
        quantity:null
      },
      formRule:{},
      orderid:null,
      status_loading:false,
      formLabelWidth:'140px',
      formInfo:{
        cityid:null,
        cityname:'',
        consignee:'',
        consignorid:3,
        consignorname:'',
        contact:'',
        countryid:2,
        countryname:'',
        createdate:1574128642879,
        createid:1,
        creator:'',
        currency:'',
        currencyid:null,
        freight:0,
        mealtype:0,
        mobile:'',
        modifier:'',
        modifydate:1574128643334,
        modifyid:1,
        ordercode:'',
        orderid:67,
        ordertype:1,
        payment:1,
        provinceid:642,
        provincename:'',
        regionid:645,
        regionname:'',
        saleorderdetail:[],
        shippingaddress:'',
        shopid:1,
        shopname:'',
        stateid:0,
        statetext:'',
        storeordercode:'',
        totalamount:23912.14,
        totalnumber:40,
        warehouseid:1,
        warehousename:''
      },
      tableData:[],
      getMergeRows:[],
      saveRow:{},
      dataList:[]
    }
  },
  filters:{
    // WAITPICK(1,"待拣货"),
    // OUTSTOCK(8,"缺货"),
    // FINISHED(9,"已完成"),
    // CANCEL(10,"已取消");
    stateFilter(value, lan){
      switch (value){
      case 1:
        return lan('m.out.state2')
      case 8:
        return lan('m.out.lack')
      case 9:
        return lan('m.out.detailState2')
      case 20:
        return lan('m.pick.state10')
      }
    }
  },
  mounted(){

  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    initData(){
      this.tableData = []
      let saleorderList = this.cloneObject(this.formInfo.saleorderdetail)
      // 格式化数据
      saleorderList.map((item, index) => {
        item.saleorderdetailitem.map((__item) => {
          this.tableData.push(Object.assign({}, __item, { __index:index + 1, saleorderdetailid:item.saleorderdetailid }))
        })
      })
      let __index = 0
      let code = null
      this.getMergeRows = []
      this.tableData.forEach((item, index) => {
        if (item.saleorderdetailid !== code){
          this.getMergeRows.push(1)
          code = item.saleorderdetailid
          __index = index
        } else {
          if (code){
            ++this.getMergeRows[__index]
            this.getMergeRows.push(0)
          }
        }
      })
      console.log(this.tableData)
    },
    objectSpanMethod({ rowIndex, columnIndex }){
      let MergeArr = [0, 1, 2, 3, 4]
      if (MergeArr.includes(columnIndex)){
        if (!this.getMergeRows.length){
          return {
            rowspan:1,
            colspan:1
          }
        } else {
          return {
            rowspan:this.getMergeRows[rowIndex],
            colspan:this.getMergeRows[rowIndex] ? 1 : 0
          }
        }
      }
    },
    getOrder(){
      this.status_loading = true
      this.$axios({
        method:'get',
        url:`/saleorder/query/${this.orderid}`
      }).then(({ data }) => {
        this.formInfo = data
        this.status_loading = false
        this.formInfo.saleorderdetail.forEach(v => {
          if (v.saleorderdetailitem && v.saleorderdetailitem.length > 0){
            this.initData()
          } else {
            this.formInfo.saleorderdetail.forEach((v, index) => {
              v.__index = index + 1
            })
            this.tableData = this.formInfo.saleorderdetail
          }
        })
      })
    },
    confirm(){
      this.setLoction(this.saveRow.itemid)
    },
    showDialog(row){
      this.dialogFormVisible1 = true
      this.saveRow = row
      this.setLoction(this.saveRow.itemid)
    },
    setLoction(itemid){
      this.$axios({
        method:'post',
        url:`/saleorder/reallocateLoc/${itemid}`
      }).then(({ data }) => {
        this.dataList = data
      })
      //this.getOrder()
    },
    close(){
      this.dialogFormVisible1=false
      this.getOrder()
    }
  },

  created(){
    this.orderid = this.$route.query.orderid
    this.getOrder()
  }
}
</script>
<style lang='scss' scoped>
.container {
  background: #fff;
}
</style>